<template>
    <div class="cell-item">
        <LabelRow v-on:onMore = "onMore" v-bind:label="label" text="更多>>"></LabelRow>
        <ul class="cell-ul">
            <li v-on:click = "onItem(item)"  v-for = "(item,index) in dataList" :key="index" class="guid-li">
                <i class="square"></i>
                <span>{{item.title}}</span>
            </li>
            <div v-if = "!dataList.length" class="no-data">
                <img src="../../assets/no-data.png" alt="">
            </div>
        </ul>
        <GuidDialog/>

    </div>
</template>
<script>
import LabelRow from "../common/labelRow.vue";
import GuidDialog from "./guidDialog.vue";
import Pubsub from "../../utils/pubsub";
import {tyGetGuideList} from "../../config/api";
export default {
    components: {
        LabelRow,
        GuidDialog,
    },
    data() {
        return {
            label: {
                url: require("../../assets/unifyAcceptWorkbench/bszn-icon.png"),
                label: "办事指南"
            },
            dataList:[]
        };
    },
    mounted(){
        this.getList();
    },
    methods:{
        /**
         * 点击更多
         */
        onMore(){
            Pubsub.publish("showGuidDialog");
        },
        //点击list事件
        onItem(item){
            Pubsub.publish("showGuidDialog",{item});
        },
        /**
         * 获取办事指南列表
         */
        getList(r = {}){
            let defaultReuqst = {
                pageNum:1,
                pageSize:5,
                title:""
            }
            let request = Object.assign(defaultReuqst,r);
            tyGetGuideList(request).then((result = {})=>{
                let {rows = []} = result;
                this.dataList = rows;
            })
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.guid-li{
    height:36px;
    border-radius: 18px;
    background-color: #f1f1f1;
    font-size: 16px;
        display: flex;
    align-items: center;
    padding: 0 15px;
    margin-bottom:14px;
    cursor: pointer;
    &:last-child{
        margin-bottom:0;
    }
}
.square{
    height:13px;
    width:13px;
    background: #0a1d69;
    transform: rotate(45deg);
    margin-right: 12px;
    display: block;
}
</style>
